<template>
    <el-col class="sub-main">
        <el-col class="title box box-align-center box-pack-between">
            <h3>{{Index+1}} 、判断题</h3>
            <div class="box box-align-center">
                <i class="el-icon-delete mr5 cp" @click="handleDelete()"></i>
                <!-- 分数
                <el-input v-model="score" @input.native="score = score.replace(/[^\d]/g,'')" maxlength="3" size="mini"
                    style="width:50px;margin: 0 10px;padding: 0;" @change="setScoreVal()" />
                分 -->
            </div>
        </el-col>
        <el-col class="padd20 fwb">
            <div :id="`div${Index}`" class="edit">
            </div>
            <el-divider></el-divider>
        </el-col>
        <el-col class="items" v-if="ruleForm.ref !=1 && ruleForm.ref != undefined">
            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                <el-form-item label="答案">
                    <el-radio-group v-model="ruleForm.value">
                        <el-radio :label="index" v-for="(item,index) in selectOptions" :key="index">{{item.label}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="正确答案">
                    <span class="right-answer">{{ruleForm.value == 0?"正确":"错误"}}</span>
                </el-form-item>
                <el-form-item label="题目解析" prop="analysis">
                    <el-input type="textarea" v-model="ruleForm.analysis" style="width: 300px;"></el-input>

                </el-form-item>
                <el-form-item label="题目分类" prop="type">
                    <el-cascader v-model="ruleForm.type" :options="options" :props="{ expandTrigger: 'hover' }"
                        @change="handleChange"></el-cascader>
                </el-form-item>
            </el-form>
        </el-col>
    </el-col>
</template>

<script>
    import E from 'wangeditor';
    export default {
        props: {
            Data: {
                default: ''
            },
            Index: {
                default: 0
            },
            setScore: {},
            options: {}

        },
        data() {
            return {
                schoolid: this.$store.state.schoolId,
                user: this.$store.state.loginInfo.user,
                editData: this.Data,
                scoreObj: this.setScore,
                score: 3,
                editor: null,
                dynamicValidateForm: {
                    domains: [{
                        value: ''
                    }]
                },
                selectOptions: [{
                    label: '正确',
                    isRight: 0
                }, {
                    label: '错误',
                    isRight: 1
                }],
                ruleForm: {
                    title: '',
                    value: 0,
                    analysis: '',
                    isRight: 0,
                    type: [],
                    ref: 0
                },
                type: 3
            }
        },
        mounted() {
            this.$nextTick(res => {
                // this.setEditor()
            })
        },
        methods: {
            getData() {
                let arr = this.selectOptions.map(res => {
                    return {
                        subjectid: '',
                        num: '',
                        opt: res.isRight,
                        cont: res.label
                    }
                });

                let params = {
                    schoolid: this.schoolid,
                    createuserid: this.user.id,
                    createusername: this.user.name,
                    answer: this.ruleForm.value,
                    cont: this.editor.txt.html(),
                    info: this.ruleForm.analysis,
                    cousid: this.ruleForm.type[0],
                    stageid: this.ruleForm.type[1],
                    type: this.type,
                    items: arr,
                    ref:this.ruleForm.ref
                }
                return params

            },
            getEditData() {
                let arr = this.selectOptions.map(res => {
                    return {
                        subjectid: '',
                        num: '',
                        opt: res.isRight,
                        cont: res.label
                    }
                });

                let params = {
                    id: this.editData.id,
                    schoolid: this.schoolid,
                    createuserid: this.user.id,
                    createusername: this.user.name,
                    answer: this.ruleForm.value,
                    cont: this.editor.txt.html(),
                    info: this.ruleForm.analysis,
                    cousid: this.ruleForm.type[0],
                    stageid: this.ruleForm.type[1],
                    type: this.type,
                    items: arr,
                    ref:this.ruleForm.ref
                }
                return params

            },
            setData() {
                this.editor.txt.html(this.editData.cont)
                if (this.editData.ref != 1 && this.editData.ref != undefined) {
                    this.selectOptions = this.editData.items.map(res => {
                        return {
                            isRight: parseInt(res.opt),
                            label: res.cont
                        }
                    });
                }
                this.ruleForm.isRight = parseInt(this.editData.answer)
                this.ruleForm.value = parseInt(this.editData.answer)
                this.ruleForm.analysis = this.editData.info
                this.ruleForm.type.push(this.editData.cousid)
                this.ruleForm.type.push(this.editData.stageid)
                this.ruleForm.ref = this.editData.ref
                console.log(this.ruleForm.value);

            },
            setEditor() {
                this.editor = new E(`#div${this.Index}`)
                // 或者 const editor = new E( document.getElementById('div1') )
                this.editor.config.height = 80
                this.editor.config.placeholder = '请填写标题'
                this.editor.config.menus = [
                    'head',
                    'bold',
                    'fontSize',
                    'fontName',
                    'italic',
                    'underline'
                ]
                this.editor.config.showFullScreen = false
                this.editor.config.zIndex = 5
                this.editor.config.focus = true
                this.editor.create()
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1)
                }
            },
            addDomain() {
                this.dynamicValidateForm.domains.push({
                    value: '',
                    key: Date.now()
                });
            },
           handleDelete() {
               console.log(this.Index);
               this.$emit('handleDeleteItem', this.Index)
           },
            //选择关联
            handleChange(value) {
                console.log(value);
            },
            //选择正确答案
            selectRight(e) {
                this.ruleForm.isRight = e
            },
            //增加选项
            handleAddOption() {
                if (this.selectOptions.length < 8) {
                    let items = {
                        value: '',
                        isRight: this.selectOptions.length + 1
                    };
                    this.selectOptions.push(items)
                } else {
                    this.$message.error("最多可配置8个选项！")
                }

            },
            //删除选项
            handleDeleteOption(index) {
                if (this.selectOptions.length > 2) {
                    this.selectOptions.splice(index, 1)
                } else {
                    this.$message.error("最少保留2个选项！")
                }
            },
            resetNum(num) {
                return String.fromCharCode(num + 65)
            },
            arrReset() {
                let arr = [];
                this.selectOptions.forEach((item, index) => {
                    let items = {
                        key: String.fromCharCode(index + 65),
                        val: item.value,
                        yes: this.ruleForm.value == item.isRight ? 1 : 0
                    }
                    arr.push(items)
                })
                return arr
            },
            //更改分数改变父级分数
            setScoreVal() {
                this.$emit('handleUpdate', this.score != `` ? this.score : 0, this.Index)
            },
            //批量设置分值
            handleSetScore() {
                this.score = parseInt(this.setScore.judgeValue);
                // console.log(this.scoreObj.radioValue);
                this.setScoreVal()
            }
        },
        // beforeDestroy() {
        //     // 销毁编辑器
        //     this.editor.destroy()
        //     this.editor = null
        // }
    }
</script>

<style scoped lang="scss">
    .sub-main {
        box-sizing: border-box;
        // padding: 20px;
        // border: 1px solid #D6DBE7;
        border-radius: 7px;

        .title {
            padding: 0 20px;
            height: 50px;
            background: #F7F9FD;
            border-radius: 7px 7px 0px 0px;
        }

        .fwb {
            box-sizing: border-box;
            // height: 100px;‘
        }

        .edit {
            // height: 100px !important;
        }

        .items {
            padding-right: 20px;
        }
    }

    .el-radio {

        //添加边框
        /* border: 1px solid rgb(207, 204, 204); */
        //选中时边框的颜色
        /* &.is-checked {
            border: 1px solid #28d4c1 !important;
          } */
        //鼠标滑过改变字体和小圆圈边框的样式
        &:hover {
            border-color: #25a785 !important;
            color: #25a785 !important;

            //鼠标滑过时小圆点边框显示
            .el-radio__inner {
                border-color: #25a785;
            }
        }

        .el-radio__input {
            margin-bottom: px(5);

            //选中时的样式
            &.is-checked {
                .el-radio__inner {
                    //选中时小圆圈的的颜色
                    background-color: #25a785;
                    border-color: #25a785;
                }

                +.el-radio__label {
                    //选中时字体的颜色
                    color: #25a785 !important;
                }
            }

            .el-radio__inner {

                // 鼠标滑过小圆点时的样式
                &:hover {
                    border-color: #25a785;
                }
            }
        }
    }

    .options>>>.el-form-item__content {
        display: flex;
        align-items: center;
    }

    .options .radio {
        margin-left: 50px;
    }

    .el-item {
        display: flex;
        flex-wrap: wrap;

        &>.item {
            width: 280px;
        }
    }

    .right-answer {
        height: 40px;
        line-height: 40px;
    }

    /deep/ .el-form-item {
        // margin-bottom: 0px;
    }

    /deep/ .el-input__inner {
        padding: 0 10px;
    }

    .pub-btn {
        padding: 0;
        width: 126px;
        height: 36px;
        line-height: 36px;
        background: #565DFF;
        border-color: #565DFF;
        border-radius: 7px;

        &:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary.is-active,
        .el-button--primary:active {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary:focus,
        .el-button--primary:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }
    }
</style>
